<template>
  <div id="app">
    <p>
      学生姓名:
      <input type="text" v-model="obj.name" />
    </p>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      obj: {
        name: "贾顺辉",
      },
    };
  },
  methods: {},
  // 局部过滤器
  filters: {},
  // 计算属性
  computed: {
    computedObj() {
      console.log("数据更改");
      return JSON.parse(JSON.stringify(this.obj));
    },
  },
  // 侦听器:data/computed中的数据,已经存在的数据
  // 侦听一个值得变化,来影响多个值得变化
  watch: {
    computedObj: {
      handler: function (newValue, oldValue) {
        console.log(newValue);
        console.log(oldValue);
        console.log("对象内容变化了-handler");
      },
      // 深度侦听
      deep: true,
      // 该回调将会在侦听开始之后被立即调用
      // 立即侦听
      immediate: true,
    },
  },
};
</script>

<style>
</style>
